<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:29
-->
<template>
  <div>
    <Header></Header>
    <Nav></Nav>
    <Leader :nowName="category.name" :categoryId="categoryId"></Leader>
    <!-- 体部开始 -->
    <div class="article_content1">
      <div class="wrapper">
        <div class="top">
          <!-- 文章标题 -->
          <h3>{{ articleData.title }}</h3>
          <!-- 时间 作者 阅读量 -->
          <div class="author">
            <span>发布时间：{{ articleData.publishTime | fmtDate }}</span>
            <span>发布者：{{ athor.realname }}</span>
            <span>浏览量：{{ articleData.readTimes }}</span>
            <span class="fontsize"
              >浏览字号
              <span class="parent">
                <span class="big" @click="toBig">大</span>
                <span class="middle" @click="toMiddle">中</span>
                <span class="small" @click="toSmall">小</span>
              </span>
            </span>
          </div>
        </div>
        <div class="bottom" v-html="articleData.content" ref="bottom1"></div>
      </div>
    </div>
    <!-- 体部结束 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      id: "",
      articleData: {},
      athor: "",
      category: "",
      categoryId: "",
    };
  },
  methods: {
    async getArticleData() {
      let res = await get("/index/article/findById", { id: this.id });
      this.articleData = res.data;
      // console.log(this.articleData);
      this.athor = this.articleData.baseUser;
      this.category = res.data.category;
      this.categoryId = res.data.categoryId;
      // console.log(this.categoryId);
    },
    // 控制字体变化的三个方法
    toBig() {
      // console.log(this.$refs.bottom1);
      this.$refs.bottom1.style.fontSize = "16px";
    },
    toMiddle() {
      this.$refs.bottom1.style.fontSize = "14px";
    },
    toSmall() {
      this.$refs.bottom1.style.fontSize = "12px";
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.getArticleData();
  },
};
</script>

<style lang="scss" >
.article_content1 {
  .wrapper {
    .top {
      h3 {
        font-size: 24px;
        text-align: center;
        color: #333;
      }
      .author {
        height: 35px;
        background-color: #f5f5f5;
        text-align: center;
        margin-bottom: 30px;
        span {
          font-size: 12px;
          color: #333;
          line-height: 35px;
          margin-right: 20px;
        }

        .fontsize {
          position: relative;
          float: right;
          .parent {
            position: absolute;
            top: 35px;
            left: 0;
            display: flex;
            flex-wrap: wrap;
            width: 60px;
            height: 75px;
            margin: 0;
            padding: 0;
            display: none;

            span {
              margin: 0;
              padding: 0;
              display: inline-block;
              font-size: 12px;
              text-align: center;
              width: 100%;
              height: 20px;
              background-color: #f5f5f5;
              margin-bottom: 5px;
              line-height: 20px;
              cursor: pointer;
            }
            span:hover {
              background-color: #dbecf7;
            }
          }
        }
        .fontsize:hover {
          .parent {
            display: flex;
          }
        }
      }
    }
    .bottom {
      font-size: 16px;
      p {
        text-align: left;
        text-indent: 2em;
        font-family: 宋体, SimSun;
        line-height: 30px;
        img {
          margin-left: 250px !important;
          width: 700px !important;
        }
      }
    }
  }
}
</style>